<template>
  <div class="at-collapse-item" :class="{'is-active': isActive}">
    <div class="at-collapse-item__header" @click="handleHeaderClick">
      <div class="item__header_wall" id="show">
        <slot name="title">{{title}}</slot>
        <span class='header_wall_img'>
          <img v-if='isActive' src='../../theme-default/assets/collapse/down.png' class='collapse-header-ioc'>
          <img v-else src='../../theme-default/assets/collapse/right.png' class='collapse-header-ioc'>
        </span>
        <div v-if="num!=0" class="collapse-item-more">
          <a v-show="isActive" class="collapse-item-more" @click="href(morehref)">  更多
          </a>
        </div>
        <div class="collapse-num">
          <span>
            <slot name="num" >{{num}}</slot>
          </span>
        </div>
      </div>
    </div>
    <at-collapse-transition v-if="num!=0">
      <div class="at-collapse-item__wrap" v-show="isActive">
        <slot></slot>
      </div>
    </at-collapse-transition>
  </div>
</template>
<script>
/**
 *@author 付雪双
 */
  import Emitter from '../../common/mixins/emitter';
  import AtCollapseTransition from '../../common/transitions/collapse-transition';
  
  export default {
    name: 'at-collapse-item',
    componentName: 'at-collapse-item',
    mixins: [Emitter],
    components: { AtCollapseTransition },
    data() {
      return {
      };
    },
    props: {
      /**
       * @type {String} - url地址
       */
      morehref:String,
      /**
       * @type {String} - 标题文字
       */
      title: String,
      /**
       * @type {Number} - 数量
       */
      num: Number,
      /**
       * @type {String|Number} - 标签name值作id
       */
      name: {
        type: [String, Number],
        default() {
          return this._uid;
        }
      }
    },
    computed: {
      /**
       *@returns {Boolean}
       *@description 判断组件name是否在activeNames数组中是否存在,如存在返回true列表展开
       */
      isActive() {
        return this.$parent.activeNames.indexOf(this.name) > -1;
      }
    },
    watch: {
      'isActive'(value) {
      }
    },
    methods: {
      /**
       *@description 将当前组件以item-click分发给父级
       */
      handleHeaderClick() {
        this.dispatch('at-collapse', 'item-click', this);
      },
      /**
       *@description 将当前组件“更多”跳转
       */
      href(href){
        this.$router.push({path:href})
      }
    }
  };
</script>